<template>
<div class="content-view">
<div class="table-head-tool">
<Button type="primary" @click="showAddWarp">新增</Button>
<Form ref="formInline" :model="gridOption.param.seachOption" inline :label-width="80">
<FormItem :label-width="20" class="flex">
<Select v-model="gridOption.param.seachOption.key" style="width: 120px" :placeholder="seachTypePlaceholder">
<Option v-for="item in seachTypes" :value="item.key" :key="item.key">{{ item.value }}</Option>
</Select>
<Input class="ml10" v-model="gridOption.param.seachOption.value" style="width: 200px" search placeholder="请输入关键字" @on-search="query(1)" />
</FormItem>
<FormItem>
<Button type="default" @click="exportCsv">导出</Button>
</FormItem>
</Form>
</div>
<div class="table-body">
<tables :columns="listColumns" :value="gridOption.data" :pageOption="gridOption.param.pageOption" @changePage="query"></tables>
</div>
<editModal ref="editModal" :columns="editColumns" :rules="gridOption.rules"> </editModal>
</div>
</template>
<script>
import funTool from '@/libs/funTool'
import uiTool from '@/libs/uiTool'
import modelServer from '@/api/system_high/modelServer.js'
import pageInjectJsServer from '@/api/plug/pageInjectJs_server.js'
export default {
data() {
let rules = {}

rules["name"]=[{ required: true, message: '请填写名称'}]; 
rules["platformUrl"]=[{ required: true, message: '请填写平台url'}]; 
rules["linkUrl"]=[{ required: true, message: '请填写js链接url'}]; 

rules["inline"]=[{ required: true,type:'boolean', message: '请选择是否内联', trigger: 'change' }]    
return {
seachTypes:[
 {key:"name",value:"名称"}, {key:"platformUrl",value:"平台url"}, {key:"linkUrl",value:"js链接url"}, {key:"inline",value:"是否内联"},
],
gridOption: {
param: {
seachOption:{key:"",value:""},
pageOption:{
total: 0,
page: 1,
pageSize: 20
}
},
rules,
columns:[
{key:'id',title:'id',width:'80px',is_show_edit:0},

{ key: "name",title:"名称",disabled:  false,is_show_edit:1,is_show_list:1,   com:"Input" },
{ key: "platformUrl",title:"平台url",disabled:  false,is_show_edit:1,is_show_list:1,   com:"Input" },
{ key: "linkUrl",title:"js链接url",disabled:  false,is_show_edit:1,is_show_list:1,   com:"Input" },
{ key: "inline",title:"是否内联",disabled:  false,is_show_edit:1,is_show_list:1, data_type:"boolean",  com:"i-switch" },
{key:'created_date',title:'创建时间',width:'100px',is_show_edit:0 },
{key:'updated_date',title:'更新时间',width:'100px',is_show_edit:0 },
{
title: '操作',
key: 'action',
width:'200px',
type: 'template',
render: (h, params) => {
let btns = [
{
title: '修改',
type: 'primary',
click: () => {
this.showEditWarp(params.row)
},
},
{
title: '删除',
type: 'primary',
click: () => {
this.delConfirm(params.row)
},
},
]
return uiTool.getBtn(h, btns)
},
},],
data: []
},
}
},
computed:{
seachTypePlaceholder(){
return  this.seachTypes.map(p=>p.value).slice(0,3).join('/')
},
editColumns(){
let editTempColumns=  this.gridOption.columns.filter(p=>p.is_show_edit===1)
return editTempColumns
},
listColumns(){
let listTempColumns=  this.gridOption.columns.filter(p=>p.is_show_list!==0)
return listTempColumns
}
},
mounted() {
this.init()
this.initCol()
},
methods: {
init() {
this.query(1)
},
async initCol(){

let columnRows=[    ]
let columnKeys=columnRows.map(p=>p.key)
let newColumns=this.gridOption.columns.filter(p=>columnKeys.indexOf(p.key) >-1)
for(let i=0;i<newColumns.length;i++){
let curColumn =newColumns[i]
let modelMap=columnRows[i].map_option
let res=await modelServer.interface({model_key:columnRows[i].modelKey,map_option:modelMap})
curColumn.source=res.data
}

},
async inquiry() {
let res = await pageInjectJsServer.all(this.gridOption.param)
this.gridOption.data = res.data
},
async query(page){
if (page) {
this.gridOption.param.pageOption.page = page
}
let res = await pageInjectJsServer.page(this.gridOption.param)
this.gridOption.data = res.data.rows
this.gridOption.param.pageOption.total = res.data.count
},
async showAddWarp() {
this.$refs.editModal.addShow({ }, async (newRow) => {
let res = await pageInjectJsServer.add(newRow)
rootVue.$Message.success('新增成功！')
this.init()
})
},
async showEditWarp(row) {
this.$refs.editModal.editShow(row, async (newRow) => {
let valid = await this.$refs['editModal'].$refs['From'].validate()
if (valid) {
let res = await pageInjectJsServer.edit(newRow)
rootVue.$Message.success('修改成功！')
this.init()
}
})
},
async delConfirm(row){
uiTool.delConfirm(async () => {
await pageInjectJsServer.del(row)
rootVue.$Message.success('删除成功！')
this.init()
})
},
async exportCsv(row){
await pageInjectJsServer.exportCsv(row)
}
},
}
</script>
<style lang="less"></style>